@charset "utf-8";
@import"commom/rest";
@function n($px) {
    @return $px/2;
}

@function d($px){
    @return $px/640*100%;
}
@function f($px){
    @return $px/1136*100%
}


img{
    width: 100%;
}

.da{
    position: relative;
    background: url(../img/neiye/beijin.png) no-repeat;
    background-size:100% 100% ;
    height: 100%;

    .wz{
        text-align: center;
        padding-top:n(104px);
        p{
            font-size: n(34px);
            color: #ffffff;
        }
    }
    .minddel{
        position: relative;
        .boys{
            margin: 0 auto;
            margin-top: n(40px);
            width: d(250); 
            height: n(350px);
            @extend img;
        }
        .yunq{
            position: absolute;
            top:f(282);
            left: d(88);
            width: d(112);
            height: n(83px);
            @extend img;
             -webkit-animation:nyun 5s linear 2s infinite alternate;
             @-webkit-keyframes nyun{
               0%{
                   top:n(282px);
                    left: n(88px);
               }
               25%{
                   top:n(282px);
                   left:0;
               }
               75%{
                   top: 0;
                   left: 0;
               }
               85%{
                   top: 0;
                   left: n(88px);
               }
               100%{
                   top:n(282px);
                    left: n(88px);
               }
           }
        }
        .yunw{
            position: absolute;
            top:n(308px);
            left: n(500px);
            width: d(64);
            height: n(47px);
            @extend img;
            -webkit-animation:nyunb 5s linear 2s infinite alternate;
             @-webkit-keyframes nyunb{
               0%{
                   top:n(308px);
                    left: n(500px);
               }
               25%{
                   top:0;
                   left:0;
               }
               75%{
                   top:0;
                   left: n(124px);
               }
               85%{
                   top: 0;
                   left: n(88px);
               }
               100%{
                   top:n(308px);
                    left: n(500px);
               }
           }
        }
        .yune{
            width: d(78);
            height: n(80px);
            @extend img;
            position: absolute;
             top:n(275px);
             right: 0;
        }
    }
    .bottom_bottom{
        margin-top: n(128px);
        .bottom_b{
            margin-top: 29px;
            margin-left: n(57px);
            width: d(368);
            height: n(72px);
            background:url(../img/neiye/baise.png) no-repeat;
            background-size:100%;
            font-size: n(28px);
           position: relative;
           
           &:hover{
               transform: scale(1.2);
               background: url(../img/neiye/haungse.png)no-repeat;
               background-size:100% 100%;
               
           }
           a{
               h5{
               position: absolute;
               top: n(10px);
               left: n(42px);
               color: black;
           } 
           }
          
        }
        
        
    }
    .bottom_right{
        position: relative;
       .kendiegou{
           position: absolute;
           top:n(-96px);
           right:n(152px);
           width: d(88);
           height: n(93px);
       } 

           .yinfua{
           width:d(65);
           height: n(61px);
           position: absolute;
           bottom:n(-2px);
           right: n(94px);
           -webkit-animation:yinfua 2.5s linear 1s infinite ;
           animation-fill-mode:forwards ;
           
       }
        .yinfub{
           width:d(69);
           height: n(47px);
           position: absolute;
           bottom: n(53px);
           right: n(90px);
            -webkit-animation:yinfua 2.5s linear 1.1s infinite ; 
            animation-fill-mode:forwards ; 
       }
        .yinfuc{
           width:d(75);
           height: n(53px);
           position: absolute;
           bottom: n(102px);
           right: n(76px);
            -webkit-animation:yinfua 2.5s linear 1.3s infinite;
            animation-fill-mode:forwards ;
       }
        .yinfud{
           width:d(74);
           height: n(74px);
           position: absolute;
           bottom: n(142px);
           right: n(78px);
            -webkit-animation:yinfua 2.5s linear 1.4s infinite;
            animation-fill-mode:forwards ;
       }
        .yinfue{
           width:d(104);
           height: n(122px);
           position: absolute;
           bottom: n(180px);
           right: n(74px);
            -webkit-animation:yinfua 2.5s linear 1.6s infinite;
            animation-fill-mode:forwards ;
       } 
       @-webkit-keyframes yinfua{
           0%{
               opacity: 0;
           }
           to{
               transform: translateY(-50px);
               opacity: 1;
           }
       }
    
      
    }
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    
}
@media only screen and (max-height:555.5px) {
   .da .wz {
    padding-top: 12px;
}
.da .wz p {
    font-size: 12px;
}
.da .minddel .yunq {
    width: 11.5%;
    }
.da .minddel .yune {
    width: 9.1875%;
}
.da .minddel .boys {
    margin-top: 12px;
    width: 33.0625%;
}
.da .bottom_bottom {
    margin-top: 45px;
}

    .da .bottom_bottom .bottom_b {
  margin-top: 10px;
    margin-left: 34.5px;
    width: 48.5%;
    }
    .da .bottom_right .kendiegou {
    right: 66px;
    }
    .da .wezi {
    padding-top: 22px;
    }
    .da .piao_box .piao {
    margin-top: 37px;
}
.da .piao_box .hulu {
    left: 129px;
    }
    .da .bottom_bottom {
    margin-top: 0px;
}


}

@media only screen and (min-height:556px) and (max-height:591px) {
  .da .wz {
    text-align: center;
    padding-top: 25px;
}

.da .bottom_bottom .bottom_b {
    margin-top: 24px;
}  
.da .bottom_right .kendiegou {
    right: 47px;}

}
